<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>登录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />


		<link rel="stylesheet" href="static/css/amazeui.css" />
		<link href="static/css/dlstyle.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="static/css/bootstrap.min.css" />
		<script src="static/js/vue.js"></script>
		<!-- 引入样式 -->
	<link rel="stylesheet" href="static/element-ui/lib-master/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="static/element-ui/lib-master/index.js">
	  
	</script>
	</head>

	<body>

		<div class="login-boxtitle" style="height: 100px;">
			<div class="logoBig">
				<img src="static/images/threeMouse.jpg" style="margin-left: 0px ; height: 100px;border-radius: 30px;">
			</div>
		</div>

		<div class="login-banner" id="app" >
			<div class="login-main" >
				<div class="login-banner-bg"><span></span><img src="static/images/big.jpg" /></div>
				<div class="login-box" style="margin-top: 20px;">

					<h3 class="title" style="color: teal;">登录三只松鼠购物平台商城</h3>

					<!-- <div class="clear" id="tips"></div> -->

					<h5 :style="colorStyle" id="tips" >{{tips}}&nbsp;</h5>
					<div class="login-form"  style="background: none; margin-top: 15px;">
					<!-- 和Vue的data数据相关的绑定和校验-->
					
						<form>
							<div class="user-name"  style="margin-top: 20px;">
								<label for="user"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></label>
								<!-- @keyup进行绑定 -->
								<input type="text" name="username" v-model="username" id="userName" @keyup="checkInfo" placeholder="邮箱/手机/用户名">
							</div>
							<div class="user-pass"  style="margin-top: 20px;">
								<label for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></label>
								<input type="password" name="" v-model="password" id="userPwd" placeholder="请输入密码"@keyup="checkInfo">
							</div>
						</form>


						<!--  -->
					</div>

					<div class="login-links" >
						<label for="remember-me"><input id="remember-me" type="checkbox">记住密码</label>
						<a href="#" class="am-fr">忘记密码</a>
						<br />
					</div>
					<div class="am-cf">
						<input type="button" name="" id="submitBtn" @click="doSubmit"  value="登 录" class="am-btn am-btn-primary am-btn-sm">
					</div>
					<div class="am-cf">
						<input type="button" onclick="javascript:window.location.href='register.html'" value="注 册" class="am-btn am-btn-default am-btn-sm">
					</div>
					<div class="partner">
						
					</div>

				</div>
			</div>
		</div>

		<div class="footer ">
			<div class="footer-hd ">

			</div>
			<div class="footer-bd ">
				<p>
					<a href="# ">联系我们</a>
					<a href="# ">网站地图</a>
				</p>
			</div>
		</div>

<script src="static/js/jquery-1.7.2.min.js"></script>

<!-- 自定义的Cookie取值 -->

<script src="static/js/cookie_utils.js"></script>


<script src="static/js/vue.js"></script>

<script src="static/js/axios.min.js"></script>
<script src="static/js/base.js"></script>
<script type="text/javascript">              
var vm=new Vue({
	el:'#app',
	data:{
		username:"",
		password:"",	
		tips:" ",
		colorStyle:"",
		isRight:false,
		  
		returnUrl:null,
		pid:0,
		sid:0,
		num:1

	


	}, 
	// 获取returnUrl,pid,sid
	created(){
		this.tips=getUrlParm("tips");
		this.returnUrl=getUrlParm("returnUrl");
		this.pid=getUrlParm("pid");
		this.sid=getUrlParm("sid");
		this.num=getUrlParm("num");



	},

	methods:{
		doSubmit:function() {
			// 校验成功

			if(vm.isRight){
				var url=baseUrl+"/user/login";
				axios.get(url,{	
					params:{
						username:vm.username,password:vm.password

					} }
				
					).then((res)=>{

				

					var vo=res.data;
					console.log(vo);
					

					
					if(vo.code==1){
						// 如果登录成功就把token存储到时cookie中
						setCookieValue("token",vo.msg);
						setCookieValue("userId",vo.data.userId);
						setCookieValue("username",vo.data.username);
						setCookieValue("userImg",vo.data.userImg);
						
						//  window.location.href="index.html";
						
						if(this.returnUrl==null){
						window.location.href="index.html";

						}else{
							  this.returnUrl+"?m="+Math.random();
							if(this.pid!=null){
								this.returnUrl=this.returnUrl+"&pid="+this.pid;
							}
							if(this.sid!=null){
								this.returnUrl=this.returnUrl+"&sid="+this.sid;
							}
							if(this.num!=null){
								this.returnUrl=this.returnUrl+"&num="+this.num;
							}
						
							window.location.href=this.returnUrl;


					       }
						}
					
						else if(vo.code==-1){
							vm.tips="账号被锁定";
							ELEMENT.Message.error("账号被锁定");

						}
					
					
					
						else{
						vm.tips="账号或者密码错误";
						ELEMENT.Message.error("账号或者密码错误");
					}



				});

			}else{
				vm.tips="请输入正确的用户名和密码";
				vm.colorStyle="color:red"
				ELEMENT.Message.error("请输入正确的用户名和密码");
			}

            //  1.进行数据的校验

            if(vm.username==" "){
                vm.tips="请输入用户名";
                vm.colorStyle="color:red";
				ELEMENT.Message.error("请输入用户名");


            }
             
         },
         checkInfo:function(){
            if(vm.username==""){
                vm.tips="请输入用户名";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.username.length<6 ||vm.username.length>20){
                vm.tips="账号长度必须为6-20";
                vm.colorStyle="color:red";
				vm.isRight=false;
				ELEMENT.Message.error("账号长度必须为6-20");





            }else{
// 校验密码
				if(vm.password==" "){
                vm.tips="请输入密码";
                this.colorStyle="color:red";
				vm.isRight=false;


            }else if(vm.password.length<6 ||vm.password.length>16){
				vm.tips="密码长度为6-16";
                this.colorStyle="color:red";
				ELEMENT.Message.error("密码长度为6-16");

			}else{
				vm.tips=" ";
				vm.isRight=true;
			}



			}





         }







	}

   

})




</script>


	</body>

</html>